<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Flex项目</title>

        <style type="text/css">

            .container { display: flex ; width: 800px ; height: 100px ; margin: 50px auto ; border: 2px solid blue ; }

            .first.container { flex-flow: row nowrap ; align-content: stretch ; }
            .first.container  .one { flex-grow : 0 ; flex-basis : 200px ; background: gold ; }
            .first.container  .two { flex-grow : 0 ; flex-basis : 300px ; background: #dedede ; }
            .first.container  .three { flex-grow : 0 ; flex-basis : 150px ; background: #ffff00 ; }

            .second.container { flex-flow: row nowrap ; align-content: stretch ; }
            .second.container  .one { flex-grow : 1 ; flex-basis : 200px ; background: gold ; }
            .second.container  .two { flex-grow : 1 ; flex-basis : 300px ; background: #dedede ; }
            .second.container  .three { flex-grow : 1 ; flex-basis : 150px ; background: #ffff00 ; }

        </style>

    </head>

    <body>

        <div class="container first">
            <span class="item one"></span>
            <span class="item two"></span>
            <span class="item three"></span>
        </div>

        <div class="container second">
            <span class="item one"></span>
            <span class="item two"></span>
            <span class="item three"></span>
        </div>

    </body>

</html>